<template>
	<div class="footerContent">
		<!-- Start Footer Area  -->
		<footer class="rn-footer footer-style-default variation-two">
			<div class="container">
				<el-row>
					<el-col :xs="24" :sm="24" :md="5" :lg="5">
						<div class="gttgLogo"></div>
						<div class="address" v-html="$t('gttgAdress2')"></div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="3" :lg="3">
						<div class="gttgQr"></div>
					</el-col>
					<el-col :xs="24" :sm="24" :md="16" :lg="16">
						<el-row>
							<el-col :xs="6" :sm="6" :md="3" :lg="3" :span="3" v-for="(item,index) in menus"
								:key="index">
								<div @click="goToChildPage(item.name)" class="f_menu">{{item.name}}</div>
								<div @click="goToChildPage(child.name)" class="f_child"
									v-for="(child,childIndex) in item.childMenu" :key="'childMenu_'+childIndex">
									{{child.name}}
								</div>
							</el-col>
						</el-row>
					</el-col>

				</el-row>

				<el-row class="Copyright">
					<el-col :span="24">
						<div class="CopyrightText">
							{{$t("icpContet")}}
						</div>
					</el-col>
				</el-row>
			</div>

		</footer>
		<!-- End Footer Area  -->

		<!--  <Copyright /> -->
		<ScrollTop></ScrollTop>

	</div>
</template>

<script>
	import Copyright from './Copyright'
	import ScrollTop from './ScrollTop'
	import {
		//党建引领
		partyBuildingLeads,
		//企业概况
		corporateOverviewMenu,
		//企业新闻
		corporateNews,
		//产品与服务
		productsAndServicesMenu,
		//可持续发展
		csustainableDevelopmentMenu,
		//采购信息
		procurementInformationMenu,
		//人才中心
		centreOfExcellenceFooterMenu,
		//联系我们
		contactUsMenu
	} from '../../../utils/menu.js'
	export default {
		name: 'Footer',
		components: {
			Copyright,
			ScrollTop
		},
		props: {
			data: {
				default: null
			}
		},
		data() {
			return {
				menus: [{
						name: this.$t('aboutGTTG'),
						menuIndex: 1,
						childMenu: corporateOverviewMenu
					}, {
						name: this.$t('partyBuildingLeads'), //党建资讯
						menuIndex: 2,
						childMenu: partyBuildingLeads
					},
					{
						name: this.$t('corporateNews'), //企业新闻
						menuIndex: 4,
						childMenu: corporateNews
					},
					{
						name: this.$t('productsAndServices'), //"产品与服务",
						menuIndex: 5,
						childMenu: productsAndServicesMenu
					},
					{
						name: this.$t('sustainableDevelopment'), // "可持续发展",
						menuIndex: 6,
						childMenu: csustainableDevelopmentMenu
					},
					{
						name: this.$t('BiddingProcurement'), //"招标采购",
						menuIndex: 7,
						childMenu: procurementInformationMenu
					},
					{
						name: this.$t('centreOfExcellence'), // "人才中心",
						menuIndex: 8,
						childMenu: centreOfExcellenceFooterMenu
					},
					{
						name: this.$t('contactUs'), //"联系我们",
						menuIndex: 9,
						childMenu: contactUsMenu
					},
				]
			}
		},
		methods: {
			goToChildPage(name) {
				let recruitmentQuery = {};
				if (name == this.$t("socialRecruitment")) {
					name = this.$t("recruitmentInformation");
					recruitmentQuery = {
						menuActiveIndex: 0
					}
				}
				if (name == this.$t("campusRecruitment")) {
					name = this.$t("recruitmentInformation");
					recruitmentQuery = {
						menuActiveIndex: 1
					}
				}
				this.$router.push({
					name: name,
					query: recruitmentQuery
				});
			}
		}
	}
</script>
<style>
	.footerContent {
		background-color: #1a2330;
		min-height: 441px;
		width: 100%;
		padding: 85px 5% 0px 5%;
		position: relative;
		padding-bottom: 80px;
	}

	.gttgLogo {
		height: 50px;
		width: 180px;
		background: url("../../../assets/img/gttg_foot_logo.png") no-repeat;
		background-position: 22px 50%;
		background-size: 138px 50px;
		margin-top: 12px;
	}

	.address {
		height: 30px;
		line-height: 30px;
		width: 100%;
		background: url("../../../assets/icons/icon_position.png") no-repeat;
		background-position: left;
		background-size: 20px;
		margin-top: 20px;
		padding-left: 22px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20px;
		font-size: 1em;
	}

	.f_menu {
		height: 40px;
		line-height: 20px;
		font-size: 1em;
		color: #FFF;
		cursor: pointer;
		font-weight: 400;
		text-align: center;
	}

	.f_child {
		height: 30px;
		line-height: 30px;
		font-size: .9em;
		cursor: pointer;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 0.28;
		text-align: center;
	}

	.f_child:hover {
		opacity: 1;
	}

	.Copyright {
		width: 100%;
		border-top: 1px solid #515a6e;
		position: absolute;
		bottom: 0px;
	}

	.CopyrightText {
		width: 100%;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-weight: 500;
		color: #415466;
	}

	.gttgQr {
		height: 100px;
		width: 100px;
		background: url("../../../assets/img/gttg_qr.jpg") no-repeat;
		background-position: center;
		background-size: cover;
		margin: 12px 0px 20px 40px;
	}

	@media (max-width: 1366px) {
		.gttgQr {
			margin: 12px 0px 20px 12px;
		}
	}

	@media (max-width: 1120px) {
		.gttgQr {
			margin: 12px 0px 20px 0px;
		}
	}

	@media (max-width: 1024px) {
		.gttgQr {
			margin: 12px 0px 20px 0px;
		}

		.address {
			margin-bottom: 20px;
			text-align: center;
			background: none;
		}

		.gttgQr {
			margin-left: calc((100% - 100px)/2);
		}

		.gttgLogo {
			margin: auto;
		}

	}

	@media (max-width: 768px) {
		.address {
			margin-bottom: 20px;
			text-align: center;
			background: none;
			font-size: 14px;
		}

		.gttgQr {
			margin-left: calc((100% - 100px)/2);
		}

		.gttgLogo {
			margin: auto;
		}

		.CopyrightText {
			line-height: 24px;
		}

		.f_menu {
			font-size: 14px;
		}

		.f_child {
			font-size: 12px;
		}
		.CopyrightText{
			font-size: 12px;
		}
	}
</style>
